<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!-- <link rel="stylesheet" href="css/slide.css"> -->
    <link rel="stylesheet" href="css/testCode.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/slide.js"></script>
    <style>
        *,
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="ck-slide slider">
        <ul class="ck-slide-wrapper slider-content">
        </ul>
        <div class="small-banner-bg ck-slidebox" style="margin-left: -261px;">
            <a class="ck-prev" href="javascript:;"></a>
            <ul class="small-banner dot-wrap">
            </ul>
            <a class="ck-next" href="javascript:;"></a>
        </div>
    </div>
    <script>

        $(function () {
            function slide() {
                var slide_obj = [{ 'background': '162609', 'href': '#' },
                { 'background': '162632', 'href': '#' },
                { 'background': '162928', 'href': '#' },
                { 'background': '162930', 'href': '#' },
                { 'background': '162932', 'href': '#' }]
                $.each(slide_obj, function (i, n) {
                    //添加大slider
                    var slider_item = `<li class="slider-item"><div class="bannersize" style="background:url(./img/` + n.background + `.png) no-repeat center top;"><a class="a-img-bg" href="` + n.href + `" target="_blank"></a></div></li>`
                    $(".ck-slide-wrapper").append(slider_item);
                    //添加小slider
                    var dot_wrap = `<li class="small-ban-list"><a href="javascript:;" class="small-cover"></a><a href="javascript:;"><img src="./img/` + n.background + `_80_45.png" alt=""></a></li>`;
                    $(".dot-wrap").append(dot_wrap);
                });
                $('.ck-slide').ckSlide({
                    autoPlay: true,
                    // dir: "x"
                });
            }
            slide();
        })
    </script>
</body>

</html>